<template>
  <div class="main-calendar">
    <div class="calendar-box">
      <div class="calendar-title">
        <div class="title-nav" @click="changeMonth(choiceDay, -1)">上个月</div>
        <div class="title-content">{{ titleStr }}</div>
        <div class="title-nav" @click="changeMonth(choiceDay, 1)">下个月</div>
      </div>
      <div class="calendar-week">
        <div v-for="item in WEEKCN.split('')" :key="item">{{ item }}</div>
      </div>
      <div class="calendar-footer">
        <div
          class="calendar-day"
          :class="{ 'not-month': !isInMonth(item, choiceDay), 'is-today': isToday(item), 'is-month': isInMonth(item, choiceDay) }"
          v-for="item in canlenderData"
          :key="item.time"
          @click="handleClick(item)"
        >
          <p>{{ item.day }}</p>
          <p>{{ item.isTerm ? item.Term : item.IDayCn === '初一' ? item.IMonthCn : item.IDayCn }}</p>
        </div>
      </div>
    </div>
    <div class="calendar-info">
      <date-info-box-vue :info="selectDay.date" />
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed, reactive } from 'vue';
  import { WEEKCN, DAYTIME, baseDateUnit, baseDate, parseDate, changeDate, getFirstDayInMonth, getcalendarDays, isInMonth, isToday } from '@mock/../dateUtils';
  import DateInfoBoxVue from './components/DateInfoBox.vue';

  export default defineComponent({
    name: 'Canledar',
    components: { DateInfoBoxVue },
    setup() {
      const today = new Date();
      let choiceDay = reactive(parseDate(today));
      let selectDay = reactive({
        date: choiceDay,
      });

      const changeMonth = (base: baseDate, span: number): baseDate => {
        return changeDate(base, baseDateUnit.month, span);
      };

      const titleStr = computed(() => `${choiceDay.year}年${choiceDay.month + 1}月`);
      const canlenderData = computed((): Array<baseDate> => {
        let firstDayInMonth = getFirstDayInMonth(choiceDay);
        let startDay = parseDate(firstDayInMonth.time - firstDayInMonth.week * DAYTIME);
        return getcalendarDays(startDay, firstDayInMonth);
      });

      const handleClick = (item: baseDate) => {
        selectDay.date = item;
        console.log(selectDay);
      };

      return { titleStr, WEEKCN, choiceDay, selectDay, canlenderData, isInMonth, isToday, changeMonth, handleClick };
    },
  });
</script>

<style lang="scss" scoped>
  $gradient-light: white;
  $gradient-dark: #eef7f2;
  .main-calendar {
    width: $mainWidth;
    padding: 40px 0;
    margin: 0 auto;
    display: flex;

    .calendar-box {
      width: calc(100% - 400px);
      border: 1px solid #ccc;
      padding: 20px;
      background: #fff;
      .calendar-title {
        display: flex;

        .title-nav {
          width: 120px;
          text-align: center;
          background: skyblue;
          padding: 12px 0;
          cursor: pointer;
          border-radius: 20px 20px 0 0;

          &:hover {
            background: blue;
            color: #fff;
          }
        }

        .title-content {
          flex: 1;
          text-align: center;
          padding: 12px 0;
        }
      }

      .calendar-week {
        display: flex;
        padding: 15px 0;
        background: skyblue;
        > div {
          width: 100%;
          text-align: center;
        }
      }

      .calendar-footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .calendar-day {
          width: calc(100% / 7);
          height: 100px;
          text-align: center;
          box-sizing: border-box;
          border: 1px solid skyblue;
          margin: -1px 0 0 -1px;
          place-items: center;
          padding-top: 10px;

          p:nth-of-type(1) {
            font-size: 24px;
            line-height: 50px;
            color: #5e7987;
          }

          p:nth-of-type(2) {
            font-size: 14px;
            line-height: 20px;
            color: #3b818c;
          }

          &:nth-of-type(7n + 1) {
            margin-left: 0;
          }

          &:nth-of-type(1),
          &:nth-of-type(2),
          &:nth-of-type(3),
          &:nth-of-type(4),
          &:nth-of-type(5),
          &:nth-of-type(6),
          &:nth-of-type(7) {
            margin-top: 0;
          }

          &:nth-of-type(7n + 1),
          &:nth-of-type(7n) {
            width: calc(100% / 7 + 3px);
          }
          &.not-month {
            color: #d0dfe6;
            border-color: #d0dfe6;
            user-select: none;
            background-image: linear-gradient(
              to bottom right,
              $gradient-light 0% 5%,
              $gradient-dark 5% 10%,
              $gradient-light 10% 15%,
              $gradient-dark 15% 20%,
              $gradient-light 20% 25%,
              $gradient-dark 25% 30%,
              $gradient-light 30% 35%,
              $gradient-dark 35% 40%,
              $gradient-light 40% 45%,
              $gradient-dark 45% 50%,
              $gradient-light 50% 55%,
              $gradient-dark 55% 60%,
              $gradient-light 60% 65%,
              $gradient-dark 65% 70%,
              $gradient-light 70% 75%,
              $gradient-dark 75% 80%,
              $gradient-light 80% 85%,
              $gradient-dark 85% 90%,
              $gradient-light 90% 95%,
              $gradient-dark 95%
            );
          }
          &.is-today {
            background: #f7da94;
            border: 1px solid red;
            z-index: 1;
            position: relative;

            &::after {
              content: '今';
              position: absolute;
              top: 2px;
              left: 2px;
              background: skyblue;
              height: 20px;
              width: 20px;
              border-radius: 10px;
              font-size: 12px;
              line-height: 20px;
              text-align: center;
            }
          }
          &.is-month {
            z-index: 1;
          }
          &.is-month:hover {
            border: 1px solid red;
            cursor: pointer;
            z-index: 2;
          }
        }
      }
    }
    .calendar-info {
      margin-left: 20px;
      flex: 1;
      // border: 1px solid #ccc;
      // background: #fff;
    }
  }
</style>
